<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" href="./../../layui/css/layui.css" />
    <style>
      body {
        overflow: hidden;
        font-size: 14px;
      }
      .re_content {
        width: 400px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 15px;
      }
      .form {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        padding: 15px;
      }
      /* .layui-input-block{
            margin-left: 0 !important;
            margin-bottom: 20px;
        } */
      .layui-input {
        border: 1px solid #c0bfbf !important;
      }
      .btn {
        width: 80% !important;
        height: 40px !important;
        line-height: 40px !important;
        margin: 0 auto !important;
      }
      .layui-form-label {
        padding: 9px 5px !important;
        text-align: left !important;
      }
      .layui-input-block {
        margin-left: 90px !important;
      }
      .layui-form-select dl dd.layui-this {
        background-color: #00aeff !important;
      }
      .layui-form-radioed > i,
      .layui-form-radio > i:hover {
        color: #00aeff !important;
      }
    </style>
  </head>
  <body>
    <div class="re_content">
      <div class="layui-form form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="username"
              id="username"
              placeholder="用户名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">昵称</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="nickname"
              id="nickname"
              placeholder="昵称"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input
              type="password"
              name="password"
              id="pwd"
              placeholder="密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input
              type="password"
              name="conPwd"
              id="conPwd"
              placeholder="确认密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block" id="sexy">
            <input type="radio" name="sex" value="男" title="男" checked="" />
            <input type="radio" name="sex" value="女" title="女" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">所属部门</label>
          <div class="layui-input-block">
            <select name="department" id="department" lay-filter="department">
              <!-- <option value=""></option>
              <option value="0">总办公室</option>
              <option value="1">办公室一</option>
              <option value="2">办公室二</option> -->
            </select>
          </div>
        </div>
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">权限</label>
          <div class="layui-input-block">
            <select name="permissions" lay-filter="permissions">
              <option value=""></option>
              <option value="0">一般用户</option>
              <option value="1">数据编辑者</option>
            </select>
          </div>
        </div> -->
        <div class="layui-form-item">
          <label class="layui-form-label">手机</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="phone"
              id="phone"
              placeholder="手机"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="emails"
              id="emails"
              placeholder="邮箱"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div
          class="layui-form-item"
          style="
            width: 100%;
            margin-bottom: 10px !important;
            text-align: center;
          "
        >
          <!-- <div class="layui-input-block" style="margin-bottom:0 !important"> -->
          <button
            class="layui-btn layui-btn-normal btn"
            lay-submit
            lay-filter="form"
          >
          注册
          </button>
          <!-- </div> -->
        </div>
    </div>
    </div>
  </body>
  <script src="./../../JS/jquery-2.0.3.js"></script>
  <script src="./../../layui/layui.js"></script>
  <script>
      var form;
      var layer;
      layui.use("form",function () { 
            form = layui.form;
            layer = layui.layer;
      })
      $(function () { 
            // 获取部门的下拉选择
            $.ajax({
            type: "get",
            url: parent.defaultUrl + "/depatmant_list",
            success:function(data){
                var msg = data.data;
                $("#department").empty();
                var t='';
                if(msg && msg !=''){
                for(var i=0;i<msg.length;i++){
                    t+='<option value="'+msg[i].id+'">'+msg[i].groupname+'</option>'
                }
                $("#department").append(t)
                form.render('select');
            }
          }
          })  
      })
    $('.btn').click(function () { 
        var username = $('#username').val(); //用户名
        var nickname = $('#nickname').val(); //昵称
        var pwd = $('#pwd').val(); //密码
        var conPwd = $('#conPwd').val(); //确认密码
        var sex = $('#sexy input[name="sex"]:checked ').val()//性别
        var dept = $('#department').val();//部门
        var phone = $('#phone').val(); //手机号
        var emails = $('#emails').val(); //邮箱
        if(username == ''){
            layer.msg("用户名不能为空！");
            return false; 
        }
        if(nickname == ''){
            layer.msg("昵称不能为空！");
            return false; 
        }
        if(pwd == ''){
            layer.msg("密码不能为空！");
            return false; 
        }
        if (pwd != conPwd) {
          layer.msg("密码不一致！");
          return false;
        }
        if (!(/^1[3456789]\d{9}$/.test(phone))){
            layer.msg("手机号错误！");
            return false;
        }
        //验证邮箱
        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if(!reg.test(emails)){
            layer.msg("邮箱格式错误！");
            return false;
        }
        $.ajax({
          type: "post",
          url: parent.defaultUrl + "/regist",
          data: JSON.stringify({
            userCount:username,
            userName:nickname,
            userCode:pwd,
            userSex:sex,
            userGroup:dept,
            userPhone:phone,
            userMail:emails,
            rid:1
          }),
          dataType: "json",
          contentType:'application/json',
        //   xhrFields: { withCredentials: true },
          success: function (data) {
            if (data.code === 200) {
              parent.layer.msg("注册成功");
              //向本地缓存登录数据
              parent.setLocalStorage('JSXM',data.data);   
              parent.sysPopups('账号登录','./HTML/login/login.html',400,310,'')        
            } else if (data.message) {
              parent.layer.msg(data.message);
            }
          },
          error: function (data) {},
        });
     })
    // 回车键触发提交
    $(".btn").on("keydown", function (event) {
      if (event.keyCode == 13) {
        $(".btn").trigger("click");
        return false;
      }
    });
  </script>
</html>
